<template>
  <div>
    <h1>我是Footer</h1>
    <p>{{count}}</p>
    <button @click="increment">点击累加</button>
    <button @click="decrement">点击累减</button>
    <button @click="incrementN({n:3})">点击加n</button>
    <button @click="incrementWait">等等在加</button>
    <p>{{add}}</p>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
export default {
  name: "Footer",
    // vuex中提供了一种映射方法,mapState()
  mounted(){
    //   console.log(mapState(['count']));//返回一个对象,对象中有一个count是计算属性函数,调用count得到state中的count值
    //   console.log(mapState(['count']).count.call(this));
  },

  //插值语法中太过复杂,可以使用计算属性
  computed:{
      /* count(){
          return this.$store.state.count
      } */
      ...mapState("count",['count']),
      ...mapGetters("count",['add'])
  },
  methods:{
      ...mapMutations("count",['increment','decrement',"incrementN"]),
    //   increment(){
    //       this.$store.commit('increment')
    //   },
    //   decrement(){
    //       this.$store.commit('decrement')
    //   } 
    ...mapActions("count",['incrementWait'])
  }
};
</script>

<style>
</style>